<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:py="http://genshi.edgewall.org/"
      xmlns:xi="http://www.w3.org/2001/XInclude">

  <xi:include href="master.html" />

<head>
  <meta content="text/html; charset=UTF-8" http-equiv="content-type" py:replace="''"/>
  <title>Add Record</title>
    <script type="text/javascript" src="${tg.url('/js/jquery.selso.js')}"></script>  
    <script type="text/javascript" src="${tg.url('/js/jquery.comboselect.js')}"></script>
    <script type="text/javascript" src="${tg.url('/js/jquery.validate.js')}"></script>
    <link rel="stylesheet" type="text/css" media="all" href="${tg.url('/css/jquery.comboselect.css')}" />
    <script type="text/javascript" src="${tg.url('/js/jquery.validate.js')}"></script>
<style type="text/css">
    * { font-family: Verdana; font-size: 96%; }
    label { width: 15em; float: left; }
    label.error { float: none; color: red; padding-left: .0em; vertical-align: top; }
    p { clear: both; }
    .submit { margin-left: 0em; }
    em { font-weight: normal; padding-right: 0em; vertical-align: top; }
</style>
<script type="text/javascript">/*<![CDATA[*/
  $(document).ready(function(){
    $("#add_metadata").validate();
  });
/*]]>*/
</script>

</head>
<body>
<div class="grid_12">
    ${sidebar_left()}
    <div class="grid_9 omega">
        <!-- root element for the wizard --> 
<div id="wizard"> 
 
    <!-- tabs --> 
    <ul class="tabs"> 
        <li><a href="#" class="w2">Metadata</a></li>
        <li><a href="#" class="w2">Parties</a></li>
        <li><a href="#" class="w2">Events</a></li> 
        <li><a href="#" class="w2">Documents</a></li>
        <!--<li><a href="#" class="w2">Custom</a></li>-->
    </ul> 
 
    <!-- panes --> 
    <div class="panes"> 
        <div>
            <form id="add_metadata" action="/record/add_meta" method="post">
            <fieldset><legend>Metadata about this Record</legend>
            <div class="grid_9">
                <div class="grid_3 alpha"><label for="title" accesskey="t">Record Title</label></div>
                <div class="grid_3 omega"><input type="text" id="title" name="title" maxlength="99" style="width:100%" class="required"/></div>
            </div>


            <div class="grid_9">
                <div class="grid_3 alpha"><label for="description" accesskey="d">Record Description</label></div>
                <div class="grid_3 omega">
                    <textarea id="description" name="description" style="width:100%"></textarea>
                </div>
            </div>


            <div class="grid_9">
                <div class="grid_3 alpha"><label for="read_access" accesskey="r">Read Access</label></div>
                <div class="grid_3 omega">
                    <select id="read_access" name="read_access" style="width:100%" multiple="multiple" size="4">
                        <option py:for="g in groups" value="${g.group_id}">${g.group_name}</option>
                    </select>
                </div>
            </div>


            <div class="grid_9">
                <div class="grid_3 alpha"><label for="write_access" accesskey="r">Write Access</label></div>
                <div class="grid_3 omega">
                    <select id="write_access" name="write_access" style="width:100%" multiple="multiple" size="4">
                        <option py:for="g in groups" value="${g.group_id}">${g.group_name}</option>
                    </select>
                </div>
            </div>


            </fieldset>
            <div class="grid_9">
                <div class="grid_4 alpha">
                    <input id="add_metadata_submit" name="add_metadata_submit" type="submit" value="Add Metadata" />
                </div>
            </div>
            </form>
        </div> 

        <div>
            <div class="grid_9">
                <form action="add_parties" method="post">
                    <fieldset><legend>Parties associated with this Record</legend>
                    <label for="myselect">Add &amp; Remove Parties</label>
                        <select id="myselect" name="myselect" multiple="multiple" size="6">
                            <option py:for="p in parties" value="${p.party_id}">${p.name}</option>    
                        </select>
                    <input id="add_parties_submit" name="add_parties_submit" type="submit" value="Add Parties" />
                    </fieldset>
                </form>
            </div>
            <div class="grid_9">
                You can quickly add more parties...
            </div>
        </div>


        <div>
            <fieldset><legend>Events associated with this Record</legend>
            <div class="grid_9">
                <div class="grid_3 alpha">Title for Event:</div>
                <div class="grid_3 omega"><input type="text" id="add_event_title" name="event_title" maxlength="99" style="width:100%"/></div>
            </div>
            <div class="grid_9">
                <div class="grid_3 alpha">Description for Event:</div>
                <div class="grid_3 omega">
                    <textarea id="add_event_desc" name="event_description" style="width:100%"></textarea>
                </div>
            </div>
            </fieldset>
            <!-- previous/next buttons don't work as they are in the middle of a form -->
            <!--<button class="prev">&laquo; Prev</button><button class="next">Next &raquo;</button>-->
        </div> 
        <div>
            <h2>Documents associated with this Record</h2>
        </div>
       <!-- <div>
            <h2>Add Custom Fields</h2>
        </div>-->
    </div>
    <div class="grid_9">
        ouou
    </div>
</div>


    </div>
</div>
<script type="text/javascript">/*<![CDATA[*/ 
$(function() {
    // get container for the wizard and initialize its exposing
    var wizard = $("#wizard");//.expose({color: '#789', lazy: true});
    // enable exposing on the wizard
    //wizard.click(function() {
    //    $(this).expose().load();
    //});
    // enable tabs that are contained within wizard
    $("ul.tabs", wizard).tabs($("div.panes > div", wizard), function(index) {
        /* now we are inside the onBeforeClick event */
/*
        // ensure that the "terms" checkbox is checked.
        var terms = $("#terms");
        if (index > 0 && !terms.get(0).checked)  {
            terms.parent().addClass("error");
            // when false is returned, the user cannot advance to the next tab
            return false;
        }
        // everything is ok. remove possible red highlight from the terms
        terms.parent().removeClass("error");
*/
    });
    // get handle to the tabs API
    var api = $("ul.tabs", wizard).tabs(0);
    // "next tab" button
    $("button.next", wizard).click(function() {
        api.next();
    });
    // "previous tab" button
    $("button.prev", wizard).click(function() {
        api.prev();
    });

        $(function(){
            // populate the third sample dynamically
            /*
            var dynopts = '<option value="A1">A1<\/option>';
            dynopts += '<option value="B2" selected="selected">B2<\/option>';
            dynopts += '<option value="C3">C3<\/option>';
            dynopts += '<option value="D4">D4<\/option>';
            dynopts += '<option value="E5" selected="selected">E5<\/option>';*/
            //$('#myajaxselect').html(dynopts);
            $('#myselect').comboselect({ sort: 'both', addbtn: '+',  rembtn: '-' });
        
            /*
            $('#transform').one('click', function(){            
                $('#myselect').comboselect({ sort: 'both', addbtn: '+',  rembtn: '-' });
                $('#myotherselect').comboselect({ sort: 'left', addbtn: 'add',  rembtn: 'rem' });   
                $('#myajaxselect').comboselect();
                
                $(this).parent().html('Okay');
                return false;
            });
            */

        });
    });
/*]]>*/</script>
</body>
</html>
